
var can = document.getElementById('jk');
var con = can.getContext('2d');

var FONT_HEIGHT = 15,
MARGIN = 35,
HAND_TRUNCATION = can.width/25,
HOUR_HAND_TRUNCATION = can.width/10,
NUMERAL_SPACING = 20,
RADIUS = can.width/2 - MARGIN,
HAND_RADIUS = RADIUS + NUMERAL_SPACING;


function drawCircle () {
	con.beginPath();
	con.arc(can.width/2, can.height/2,
		RADIUS, 0, Math.PI*2, true);
	con.stroke();
}

function drawNumerals () {
	var numerals = [1,2,3,4,5,6,7,8,9,10,11,12],
	    angle = 0,
	    numeralWidth = 0;

	numerals.forEach(function(numeral) {
        angle = Math.PI/6 * (numeral-3);
        numeralWidth = con.measureText(numeral).width;
        con.fillText(numeral,
        	can.width/2 + Math.cos(angle)*(HAND_RADIUS) -
        	    numeralWidth/2,
        	can.height/2 + Math.sin(angle)*(HAND_RADIUS) +
        	    FONT_HEIGHT/3);
	});
}

function drawCenter () {
	con.beginPath();
	con.arc(can.width/2, can.height/2, 5, 0, Math.PI*2, true);
	con.fill();
}

function drawHand (loc, isHour) {
	var angle = (Math.PI*2)*(loc/60) - Math.PI/2,
	    handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION
	                        : RADIUS - HAND_TRUNCATION;

	con.moveTo(can.width/2, can.height/2);
	con.lineTo(can.width/2 + Math.cos(angle)*handRadius,
		       can.height/2 + Math.sin(angle)*handRadius);
	con.stroke();
}

function drawHands () {
	var date = new Date,
	    hour = date.getHours();

	hour = hour > 12 ? hour - 12 :hour;

	drawHand(hour*5 + (date.getMinutes()/60)*5, true, 0.5);
	drawHand(date.getMinutes(), false, 0.5);
	drawHand(date.getSeconds(), false, 0.2);
}

function drawClock () {
	con.clearRect(0,0,can.width, can.height);

	drawCircle();
	drawCenter();
	drawHands();
	drawNumerals();
}

con.font = FONT_HEIGHT + 'px Arial';
loop = setInterval(drawClock, 1000);
